<template>
  <el-form ref="formRef" class="antd-modal-form">
    <el-row>
      <el-col :span="24">
        <el-form-item prop="action">
          <el-radio-group v-model="formData.action">
            <el-radio value="2">申诉</el-radio>
            <el-radio value="1">同意处罚</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="formData.action == 1">
        <el-form-item prop="travelFee">
          行程费见减免:
          <el-input-number v-model="formData.travelFee"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="content">
          <div>申诉原因</div>
          <el-input v-model="formData.content" placeholder="请输入内容" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item>
          <div class="box" v-for="(item, i) in files" :key="item.id">
            <input class="ipt" type="file" @change="handleFileChange($event, item.id)" />
            <div style="display: flex; margin-top: 10px">
              <el-date-picker
                v-if="item.type == 'mp3'"
                showTime
                style="width: 150px"
                format="YYYY-MM-DD HH:mm"
                valueFormat="YYYY-MM-DD HH:mm:00"
                placeholder="请选择开始时间"
                v-model="item.startTime"
              />
              <el-date-picker
                v-if="item.type == 'mp3'"
                showTime
                style="width: 150px; margin-right: 10px"
                format="YYYY-MM-DD HH:mm"
                valueFormat="YYYY-MM-DD HH:mm:59"
                placeholder="请选择结束时间"
                v-model:value="item.endTime"
              />
              <div style="display: flex">
                <el-button type="danger" @click="handleRemove(i)">删除</el-button>
                <el-button style="margin-left: 10px" v-if="i == files.length - 1" type="primary" @click="handleAdd()">新增</el-button>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-button style="width: 100%; margin-top: 14px" @click="submitForm" type="primary">确认</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, onMounted } from "vue";
import CommonApi from "@/api/common";
import OrderApi from "@/api/order";
const props = defineProps({
  id: { type: String, default: "" },
});
const formRef = ref();
const emit = defineEmits(["register", "ok"]);
const formData = reactive<Record<string, any>>({
  id: "",
  action: undefined,
  content: undefined,
  file: undefined,
  travelFee: 0,
});

const files = ref([{ id: Date.now() + Math.random().toString(16).slice(2), endTime: "", startTime: "", type: "", key: "" }]);
//表单验证
const validatorRules = {
  action: [{ required: true, message: "请选择!" }],
};

const handleFileChange = (event: any, id: any) => {
  //请求阿里云拿到上传参数
  CommonApi.getOssParam({ fileType: 5 }).then((res: any) => {
    console.log(res);

    let data = {
      policy: res.result.policy,
      OSSAccessKeyId: res.result.accessId,
      signature: res.result.signature,
      success_action_status: res.result.success_action_status,
      key: res.result.key,
      name: res.result.name,
      file: event.target.files[0],
    };
    const file = files.value.find((item) => item.id === id);
    if (file) {
      file.key = res.key;
      file.type = event.target.files[0].name.split(".").pop() || "";
    }

    // 发送图片给阿里云
    CommonApi.common(data, res.result.host, "post").then((res) => {});
  });
};

function handleAdd() {
  files.value.push({ id: Date.now() + Math.random().toString(16).slice(2), endTime: "", startTime: "", type: "", key: "" });
}
function handleRemove(index: any) {
  if (files.value.length !== 1) {
    files.value.splice(index, 1);
  }
}

/**
 * 提交数据
 */
async function submitForm() {
  let model: any = formData;
  model.file = files.value;
  model.id = props.id;
  OrderApi.eventReply(model).then((res: any) => {
    if (res.code == 0) {
      ElMessage.success(res.message);
      emit("ok");
    } else {
      ElMessage.warning(res.message);
    }
  });
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep.ant-picker {
}
.ipt {
  width: 55%;
}
.antd-modal-form {
  padding: 14px;
}
</style>
